<template>
  <div class="index-container">
    <RayTable ref="table" :menu="menu" :data_object_no="menu.data_object_no" :height="tableHeight">
      <template #line_btn_prepend="{row}">
        <el-button size="mini" type="warning" @click="permission(row)">分配权限</el-button>
        <el-button size="mini" type="success" @click="chooseUser(row)">分配人员</el-button>
        <el-button size="mini" type="danger" icon="el-icon-delete" @click="del(row)" circle></el-button>
      </template>
    </RayTable>
    <Permission ref="p"></Permission>
  </div>
</template>

<script>
  import RayTable from '@/views/template/components/rayTable.vue';
  import Permission from '@/views/template/components/permission';
  import {
    del, getUserByRole,setRoleUser
  } from '@/api/template/permission.js';

  export default {
    name: 'role',
    components: {
      RayTable,
      Permission
    },
    data() {
      return {};
    },
    watch: {},
    created() {
      this.menu = this.$route.meta.query;
      this.tableHeight = document.documentElement.clientHeight - 250;
    },
    methods: {
      permission(row) {
        this.$refs.p.show(row.role_no);
      },
      chooseUser(row){
        getUserByRole(row.role_no).then(res =>{
          var config = {"allowNum":9999,"select_userids":res.select}
          this.$UserSelector.show(config).then(res => {
            setRoleUser(row.role_no,res).then(res1 =>{
              this.$message({
                message: res1.msg,
                type: 'success'
              });
            })
          })
        })
      },
      del(row) {
        this.$confirm('确定要删除此角色吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          del(row).then(res => {
            this.$message({
              message: res.msg,
              type: 'success'
            });
            this.$refs.table.$refs.table.remove(row)
          })
        })

      }
    }
  };
</script>
